<template>
  <div class="recommend" ref="recommend">
    <scroll ref="scroll" class="recommend-content" :data="disclist">
      <!-- 全屏滚动 -->
      <div>
        <div class="slider-wrapper" v-if="recommends.length">
          <!-- 轮播图 -->
          <slider>
            <div v-for="item in recommends" :key="item.id">
              <a :href="item.linkUrl">
                <img class="needsclick" @load="loadImg()" :src="item.picUrl" alt="">
              </a>
            </div>
          </slider>
        </div>
        <!-- 推荐列表 -->
        <div class="recommend-list">
          <h1 class="list-title">热门歌单推荐</h1>
          <ul>
            <li class="item" v-for="item in disclist" :key="item.dissid" @click="selectItem(item)">
              <div class="icon"><img width="60" height="60" v-lazy="item.imgurl" alt=""></div>
              <div class="text">
                <h2 class="name" v-html="item.creator.name"></h2>
                <p class="desc" v-html="item.dissname"></p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 加载动画 -->
      <div class="loading-content" v-show="!disclist.length">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
import {getRecommend, getDiscList} from 'api/recommend'
import Slider from 'base/slider/slider'
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import {ERR_OK} from 'api/config'
import {playlistMixin} from 'common/js/mixin'
import {mapMutations} from 'vuex'

export default {
  name: 'recommend',
  data () {
    return {
      recommends: [],
      disclist: []
    }
  },
  components: {Slider, Scroll, Loading},
  mixins: [playlistMixin],
  methods: {
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      this.$refs.recommend.style.bottom = bottom
      this.$refs.scroll.refresh()
    },

    async _getRecommend () {
      try {
        let result = await getRecommend()
        if (result.code === ERR_OK) {
          this.recommends = result.data.slider
        }
      } catch (e) {
        console.log(e.message)
      }
    },
    async _getDiscList () {
      let result = await getDiscList()
      if (result !== 'Error Network' && result.data.code === 0) {
        this.disclist = result.data.data.list
      }
    },
    loadImg () {
      if (!this.imgLoaded) {
        this.$refs.scroll.refresh()
        this.imgLoaded = true
      }
    },
    selectItem (item) {
      this.$router.push({
        path: `/recommend/${item.dissid}`
      })
      this.setDisc(item)
    },
    ...mapMutations({
      setDisc: 'SET_DISC'
    })
  },
  created () {
    this._getRecommend()
    this._getDiscList()
  }
}
</script>

<style lang="less" scoped>
  @import "~common/css/variable";
  .recommend {
    position: fixed;
    width: 100%;
    top: 88px;
    bottom: 0;
    .recommend-content {
      height: 100%;
      overflow: hidden;
      .slider-wrapper{
        position: relative;
        width: 100%;
        overflow: hidden;
      }
    }
  }
  .recommend-list{
    .list-title {
      text-align: center;
      font-size: @font-size-medium;
      color: @color-theme;
      margin: 20px auto;
    }
    ul {
      display: flex;
      flex-direction: column;
      padding: 0 20px;
      .item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
        .text {
          margin-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex: 1;
          line-height: 20px;
          overflow: hidden;
          font-size: @font-size-medium;
          .name {
            margin-bottom: 20px;
            color: @color-text;
          }
          .desc {
            color: @color-text-d;
          }
        }
      }
    }
  }
</style>
